<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de-DE" xml:lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
  <!-- This file was converted to xhtml by Writer2xhtml ver. &gt;&gt; adopted for V-Modell-XT &lt;&lt; 0.4.1a. See http://www.hj-gym.dk/~hj/writer2latex for more info. -->
  <head profile="http://dublincore.org/documents/dcq-html/">
    <title>Styleguide für die Mensch-Maschine-Schnittstelle erstellen</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="http://purl.org/dc/elements/1.1/" rel="schema.DC" />
    <meta content="Vassilis Rizopoulos" name="DC.creator" />
    <meta content="2007-10-10T09:33:39" name="DC.date" />
    <meta content="de-DE" name="DC.language" />
    <link href="exportfiles/style.css" media="all" rel="stylesheet" type="text/css" />
  </head>
  <body id="toc781">
    <div id="header">
      <div class="up">[<a href="7bdcf6946e06d4.html">Hoch</a>] [<a href="Projekt-V-Modell-XT.html">Anfang</a>] [<a href="1569fb3a6c52bd.html">Zurueck</a>] [<a href="14d4af843e9f6d0.html">Weiter</a>] [<a href="11385fdbde3d712.html">Ende</a>] [<a href="Projekt-V-Modell-XT.html">Inhalt</a>] </div>
      <div class="down">
        <hr />
      </div>
    </div>
    <div dir="ltr" id="content">
      <h1><span class="SectionNumber">6 </span>Teil 6: <a id="ref11432f7a07f9a6a"></a>V-Modell-Referenz Aktivitäten</h1>
      <h2><span class="SectionNumber">6.3 </span><a id="ref3ad3fbe856ba00"></a>Aktivitäten</h2>
      <h3><span class="SectionNumber">6.3.10 </span><a id="ref7bdcf6946e06d4"></a>Systementwurf</h3>
      <h4><span class="SectionNumber">6.3.10.3 </span><a id="refc879fa19b8461b"></a>Styleguide für die Mensch-Maschine-Schnittstelle erstellen</h4>
      <table cellspacing="0" id="Table4087Ctable" style="margin-top:0;margin-bottom:0;border-collapse:separate;border-spacing:0;table-layout:fixed">
        <tbody>
          <tr>
            <td class="first" style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Produkt:</p>
            </td>
            <td style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">
                <a href="160befa19760394.html#ref160befa19760394">Mensch-Maschine-Schnittstelle (Styleguide)</a>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <table cellspacing="0" id="Table4097Ctable" style="margin-top:0;margin-bottom:0;border-collapse:separate;border-spacing:0;table-layout:fixed">
        <tbody>
          <tr>
            <td class="first" style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Werkzeugreferenz:</p>
            </td>
            <td style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">
                <a href="129b8fce93d0796.html#ref129b8fce93d0796">GUI-Werkzeug</a>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="VModellXTHeading6">
        <b>Sinn und Zweck</b>
      </p>
      <p class="VModellXTTextbody">Das Regeln zur Gestaltung der Mensch-Maschine-Schnittstelle können entweder aus bereits vorhandenen Vorgaben übernommen oder aus den Ergebnissen der Aufgabenanalyse abgeleitet werden.</p>
      <p class="VModellXTTextbody">Zur Entwicklung eines Styleguides sind in einem ersten Schritt allgemeine Gestaltungsregeln festzulegen. Idealerweise kann ein vorgegebener Stil (zum Beispiel Windows Style) direkt übernommen werden. Ein Stil legt beispielsweise Farben, Formen, Liniendicke und -führung, Verwendung von Schattierungen oder die Organisation der Oberflächen, Oberflächenelemente, Menübefehlen, Kontextmenü, Tastaturbefehlen fest. Vorgaben ergeben sich zusätzlich aus organisationsspezifischen Richtlinien zum Design.</p>
      <p class="VModellXTTextbody">Anhand der →<a href="f9e2fa1973f7d5.html#reff9e2fa1973f7d5">Anwenderaufgabenanalyse</a> sowie der Anforderungen werden alle relevanten Elemente für die zu entwickelnden Benutzeroberflächen bestimmt. Jedem Element werden entsprechend dem gefundenen Stil Gestaltungsregeln zugeordnet. Um ergonomische Benutzungsoberflächen zu erhalten, ist ein besonderes Augenmerk auf Einheitlichkeit und klare Strukturierung zu legen.</p>
      <h5 id="toc782"><span class="SectionNumber">6.3.10.3.1 </span><a id="ref4c91fa2a1fc75a"></a>Gestaltungsprinzipien und -alternativen festlegen</h5>
      <table cellspacing="0" id="Table4107Ctable" style="margin-top:0;margin-bottom:0;border-collapse:separate;border-spacing:0;table-layout:fixed">
        <tbody>
          <tr>
            <td class="first" style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Produkt:</p>
            </td>
            <td style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">
                <a href="160befa19760394.html#ref160befa19760394">Mensch-Maschine-Schnittstelle (Styleguide)</a>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="VModellXTTextbody">Bei der Entwicklung der Benutzeroberflächen sind Erkenntnisse und Erfahrungen zu berücksichtigen, die den Umgang mit dem System für den Endanwender erleichtern und effizienter gestalten. Eine ergonomische Benutzeroberfläche ist nicht nur angenehmer zu bedienen (was zur Akzeptanz bei den Benutzern führt), sondern kann auch den Kostenfaktor Arbeitszeit bei der Erlernung und Benutzung des Systems erheblich reduzieren und führt damit zu höherer Produktivität.</p>
      <p class="VModellXTTextbody">Die meisten Benutzeroberflächen werden stark durch die jeweilige Fachlichkeit des zugehörigen Anwendungsfalles geprägt. Standardaufgaben, die bei der Ausführung in mehreren Benutzeroberflächen anfallen (zum Beispiel Suchen oder Eingabe fachlicher Daten), sollen demnach weitgehend gleichartig erfolgen, es sei denn, die Fachlichkeit verlangt eine Abweichung: Zum Beispiel kann bei einem Suchdialog in speziellen Fällen eine vom Standard abweichende Dialogführung benutzerfreundlicher sein.</p>
      <p class="VModellXTTextbody">Für spezielle Aufgaben- beziehungsweise Nutzungskontexte gilt es also, zwischen globaler Einheitlichkeit und einer für den Nutzungskontext optimierten Benutzeroberfläche abzuwägen. In jedem Fall sind gleiche Elemente in unterschiedlichen Dialogen gleichartig zu gestalten.</p>
      <h5 id="toc783"><span class="SectionNumber">6.3.10.3.2 </span><a id="ref857efca93dc8ce"></a>Benutzungselemente identifizieren und strukturieren</h5>
      <table cellspacing="0" id="Table4117Ctable" style="margin-top:0;margin-bottom:0;border-collapse:separate;border-spacing:0;table-layout:fixed">
        <tbody>
          <tr>
            <td class="first" style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Thema:</p>
            </td>
            <td style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Mensch-Maschine-Schnittstelle (Styleguide):<a href="160befa19760394.html#ref70afa1a97404e">Identifikation und Aufbau der Benutzungselemente</a></p>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="VModellXTTextbody">Aus den in der →<a href="f9e2fa1973f7d5.html#reff9e2fa1973f7d5">Anwenderaufgabenanalyse</a> erfassten Anwenderprofilen, den zu unterstützenden Funktionen und den Umgebungsbedingungen beziehungsweise HW-/SW-Randbedingungen sind die Benutzungselemente zu identifizieren beziehungsweise abzuleiten, wie zum Beispiel Fenster, Menüs, Slider, Buttons oder Drehknöpfe. Diese Benutzungselemente sind nach den →<a href="160befa19760394.html#refa52cfa5d8a103a">Gestaltungsprinzipien und -alternativen</a> der Mensch-Maschine-Schnittstelle zu strukturieren.</p>
      <h5 id="toc784"><span class="SectionNumber">6.3.10.3.3 </span><a id="ref6610fa2a029756"></a>Gestaltungsregeln festlegen</h5>
      <table cellspacing="0" id="Table4127Ctable" style="margin-top:0;margin-bottom:0;border-collapse:separate;border-spacing:0;table-layout:fixed">
        <tbody>
          <tr>
            <td class="first" style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">Produkt:</p>
            </td>
            <td style="border:none;padding:3.6661422px;vertical-align:top">
              <p class="VModellXTStandard">
                <a href="160befa19760394.html#ref160befa19760394">Mensch-Maschine-Schnittstelle (Styleguide)</a>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="VModellXTTextbody">Allen identifizierten Benutzungselementen sind Gestaltungsregelen anhand der vorgegebenen Gestaltungsrichtlinien zuzuordnen. Neben den Gestaltungsregeln für Benutzungselemente sind zusätzliche Gestaltungsregeln für Dialoge sowie Fenster zu definieren. Neben dem reinen Aussehen (‚Look and Feel’) eines Benutzungselements sind weitere Gestaltungsregeln bezüglich Dialogführung, Hilfefunktion und Fenstergestaltung zu definieren.</p>
      <p class="VModellXTTextbody">
        <b>Gestaltungsregeln zur Dialogführung </b>
      </p>
      <p class="VModellXTTextbody">Die Dialoggestaltung umfasst beispielsweise eine effiziente Dialogführung, eine geeignete Behandlung von Fehlern sowie die Identifikation und einheitliche Gestaltung von Dialogtypen. Bei Systemen mit einer Vielzahl verschiedener Dialoge ist es im Hinblick auf eine einheitliche und damit effiziente Benutzung wichtig, dass alle Dialoge logisch nach dem gleichen Schema, zumindest aber nach einigen wenigen Schemata, ablaufen. Dies wird durch die Verwendung von Dialogtypen sichergestellt. Ein Dialogtyp beschreibt den logischen Ablauf einer ganzen Klasse von Dialogen und kann durch ein Zustandsübergangsdiagramm oder ein Aktivitätsdiagramm festgelegt werden. Vorrangig geht es dabei um die Anwendungsfalldialoge. Wichtig ist dabei, dass systemweit möglichst wenig Dialogtypen festgelegt werden. Jedem Anwendungsfalldialog werden ein Dialogtyp und damit auch ein Zustandsübergangsdiagramm zugeordnet.</p>
      <p class="VModellXTTextbody">
        <b>Gestaltungsregeln für die Hilfefunktion </b>
      </p>
      <p class="VModellXTTextbody">Die Hilfefunktion unterstützt den Anwender bei der Durchführung der Dialoge. Zur Entwicklung der Hilfefunktion sind einige grundlegende Gestaltungsregeln zu beachten:</p>
      <ul>
        <li>Es sollte eine Einstiegsseite mit Inhaltsübersicht geben.</li>
        <li>Es sollte eine Suchseite über Hilfethemen geben.</li>
        <li>Es sollte eine Direkthilfe zu einzelnen Feldern und Anwendungsfalldialogen geben.</li>
        <li>Es sollten allgemeine Informationen zur Anwendung geben.</li>
      </ul>
      <p class="VModellXTTextbody">
        <b>Gestaltungskriterien für Fenster</b>
      </p>
      <p class="VModellXTTextbody">Wenn Dialoge die Abläufe zur Interaktion mit der Anwendung beschreiben, so spielen Fenster die →<a href="44e3fbda665f67.html#ref25dbfbe915f4b7">Rolle</a> der Schnittstelle zwischen Anwender und Anwendung. Fenster sind aus Benutzungselementen aufgebaut. Gestaltungskriterien für Fenster berücksichtigen somit weniger das Aussehen einzelner Benutzungselemente, als vielmehr Aufteilung und Gestaltung der Fensterfläche. Bei der Festlegung der Gestaltungskriterien für Fenster sind insbesondere folgende Fragestellungen zu berücksichtigen:</p>
      <ul>
        <li>Wie ist die Verteilung (Layout) der Benutzungselemente auf dem Fenster?</li>
        <li>Wo ist die Titelleiste und welche Elemente finden sich dort?</li>
        <li>Welche Funktionen werden im Menü angeboten?</li>
        <li>Wie geht der Start der Fenster und der Anwendung vor sich?</li>
        <li>Wie unterstützt die Anwendung die Veränderung der Fenstergröße?</li>
        <li>Welche Arten an Dialogfenstern werden benötigt? Beispiele sind Abfragedialoge, Hinweisdialoge, Auswahldialoge, Eingabedialoge.</li>
        <li>Ist die Anmeldung über einen Login-Dialog notwendig?</li>
      </ul>
    </div>
    <div id="footer">
      <div class="up">
        <hr style="clear:both" />
      </div>
      <div class="down">[<a href="7bdcf6946e06d4.html">Hoch</a>] [<a href="Projekt-V-Modell-XT.html">Anfang</a>] [<a href="1569fb3a6c52bd.html">Zurueck</a>] [<a href="14d4af843e9f6d0.html">Weiter</a>] [<a href="11385fdbde3d712.html">Ende</a>] [<a href="Projekt-V-Modell-XT.html">Inhalt</a>] </div>
    </div>
    <div class="navbar">
      <div class="treeLink1">
        <div class="link">
          <a href="Projekt-V-Modell-XT.html#toc0">Teil 1: Grundlagen des V-Modells</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="1054cfba6d7ffd6.html#toc35">Teil 2: Eine Tour durch das V-Modell</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="6aa6f7a07a969d.html#toc54">Teil 3: V-Modell-Referenz Tailoring</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="129acf7a07cbd9a.html#toc120">Teil 4: V-Modell-Referenz Rollen</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="7b23f7a07ce3c8.html#toc150">Teil 5: V-Modell-Referenz Produkte</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="11432f7a07f9a6a.html#toc596">Teil 6: V-Modell-Referenz Aktivitäten</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="d77dfba6c7cc54.html#toc597">Einleitung</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="dbe1fba6c7da92.html#toc602">Überblick über das Aktivitätenmodell des V-Modells</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="3ad3fbe856ba00.html#toc603">Aktivitäten</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="3ad3fbe856ba00.html#toc604">Angebots- und Vertragswesen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="2695fb673beb99.html#toc610">Planung und Steuerung</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="13be6fb673db721.html#toc646">Berichtswesen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="1232dfb6eb7bf52.html#toc655">Konfigurations- und Änderungsmanagement</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="19a8f6850f846d.html#toc675">Prüfung</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="68ff73ca99685.html#toc713">Ausschreibungs- und Vertragswesen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="113cfb6eb7ad2c.html#toc721">Anforderungen und Analysen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="12894fb6ec34938.html#toc739">Systemelemente</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="8795f694a342ab.html#toc748">Systemspezifikationen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="7bdcf6946e06d4.html#toc768">Systementwurf</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="1f9bf6946e4db6.html#toc769">Systemarchitektur erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="1569fb3a6c52bd.html#toc775">Unterstützungs-Systemarchitektur erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="current">
          <a href="c879fa19b8461b.html#toc781">Styleguide für die Mensch-Maschine-Schnittstelle erstellen</a>
        </div>
      </div>
      <div class="treeLink5">
        <div class="link">
          <a href="c879fa19b8461b.html#toc782">Gestaltungsprinzipien und -alternativen festlegen</a>
        </div>
      </div>
      <div class="treeLink5">
        <div class="link">
          <a href="c879fa19b8461b.html#toc783">Benutzungselemente identifizieren und strukturieren</a>
        </div>
      </div>
      <div class="treeLink5">
        <div class="link">
          <a href="c879fa19b8461b.html#toc784">Gestaltungsregeln festlegen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="14d4af843e9f6d0.html#toc785">SW-Architektur erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="4344fb9b4b995c.html#toc791">Datenbankentwurf erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="ce0af694aa308c.html#toc794">Implementierungs-, Integrations- und Prüfkonzept System erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="15e0dfb3a722a97.html#toc800">Implementierungs-, Integrations- und Prüfkonzept Unterstützungssystem erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="4226faec2db6e3.html#toc806">Implementierungs-, Integrations- und Prüfkonzept SW erstellen</a>
        </div>
      </div>
      <div class="treeLink4">
        <div class="link">
          <a href="11bd8fa1a000f14.html#toc812">Migrationskonzept erstellen</a>
        </div>
      </div>
      <div class="treeLink3">
        <div class="link">
          <a href="14e9cf983c96c70.html#toc816">Logistikelemente</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="118c1fbe856be46.html#toc820">Aktivitätsindex (nach Aktivitätsgruppen)</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="846cfc9d5bbe77.html#toc821">Aktivitätsindex (alphabetisch)</a>
        </div>
      </div>
      <div class="treeLink2">
        <div class="link">
          <a href="184c8fbe856c12c.html#toc822">Abbildungsverzeichnis</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="fa7bf7a07cfd49.html#toc823">Teil 7: V-Modell-Referenz Konventionsabbildungen</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="e696fba6d82de2.html#toc873">Teil 8: Anhang</a>
        </div>
      </div>
      <div class="treeLink1">
        <div class="link">
          <a href="e530fba6d8aff5.html#toc907">Teil 9: Vorlagen</a>
        </div>
      </div>
      <div class="emptyDiv"></div>
    </div>
  </body>
</html>
